<template>
  <div class="contents">
    <el-tabs v-model="activeName">
      <el-tab-pane label="线路列表" name="first">
        <el-form :inline="true" v-model="formData" class="demo-form-inline">
          <el-form-item label="发货日期:">
            <el-date-picker
              v-model="formData.date"
              type="date"
              placeholder="选择日期"
              @change="fetchData"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
          </el-form-item>
        </el-form>
        <el-button @click="dialogVisible = true">新增</el-button>
        <!-- 编辑dialog -->
        <el-dialog title="编辑" :visible.sync="editDialogVisible" width="520px">
          <el-form label-width="80px" :model="editFormData" ref="editForm">
            <el-form-item label="线路名称" prop="routeName">
              <el-input v-model="editFormData.routeName"></el-input>
            </el-form-item>
            <el-form-item label="线路司机">
              <el-select
                v-model="editFormData.driverId"
                placeholder="选择司机"
                style="width: 100%"
                disabled
              >
                <el-option
                  v-for="item in lineDriverOptions"
                  :key="item.value"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="默认线路" prop="routeDefault">
              <el-switch v-model="editFormData.routeDefault"></el-switch>
              <div style="color: rgb(204, 204, 204); font-size: 13px">
                注册或新增客户时的默认线路,可以根据实际情况进行配置.
              </div>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editSave()">保存</el-button>
          </span>
        </el-dialog>
        <!-- 新增dialog -->
        <el-dialog title="新增" :visible.sync="dialogVisible" width="520px">
          <el-form label-width="80px" :model="deliveryRoute" ref="addform">
            <el-form-item label="线路名称" prop="routeName">
              <el-input v-model="deliveryRoute.routeName"></el-input>
            </el-form-item>
            <el-form-item label="线路司机" prop="driverId">
              <el-select
                v-model="deliveryRoute.driverId"
                placeholder="选择司机"
                style="width: 100%"
              >
                <el-option
                  v-for="item in lineDriverOptions"
                  :key="item.value"
                  :label="item.deliveryDriverName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="默认线路" prop="routeDefault">
              <el-switch v-model="deliveryRoute.routeDefault"></el-switch>
              <div style="color: rgb(204, 204, 204); font-size: 13px">
                注册或新增客户时的默认线路,可以根据实际情况进行配置.
              </div>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addCancel()">取 消</el-button>
            <el-button type="primary" @click="save()">保存</el-button>
          </span>
        </el-dialog>
        <el-table :data="formData" style="width: 100%; margin-top: 10px">
          <el-table-column prop="id" label="线路ID"></el-table-column>
          <el-table-column
            prop="routeName"
            label="线路名称"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="province"
            label="下单客户数"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="city"
            label="总单数"
            width="140"
          ></el-table-column>
          <el-table-column
            prop="address"
            label="订单金额"
            width="140"
          ></el-table-column>
          <el-table-column
            prop="zip"
            label="分拣金额"
            width="140"
          ></el-table-column>
          <el-table-column
            prop="deliveryDriver.deliveryDriverName"
            label="司机"
          ></el-table-column>
          <el-table-column
            prop="deliveryDriver.phoneNumber"
            label="司机电话"
          ></el-table-column>
          <el-table-column prop="createTime" label="开通时间" width="150"></el-table-column>
          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <el-dropdown :tabindex="10">
                <el-button type="text" size="small">
                  打印
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>打印总额</el-dropdown-item>
                  <el-dropdown-item>按订单打印</el-dropdown-item>
                  <el-dropdown-item>按客户打印</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-button
                type="text"
                size="small"
                @click="modify(scope.$index, scope.row)"
                style="margin: 0 20px"
              >
                修改
              </el-button>
              <el-dropdown :tabindex="10">
                <el-button type="text" size="small">
                  更多
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>导出</el-dropdown-item>
                  <el-dropdown-item>物流排线</el-dropdown-item>
                  <!-- 注意这里给click加上了.native,否则会点击无效。 -->
                  <el-dropdown-item @click.native="delLine(scope.row)">
                    删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total, prev, pager, next,sizes"
          :page-sizes="[10, 20, 30, 40, 50]"
          style="text-align: right"
          :current-page="currentPage1"
          :total="total"
          :page-size="count"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-tab-pane>
      <el-tab-pane label="线路订单列表" name="second">
        <el-row :gutter="5">
          <el-col :span="7">
            <span style="margin-right: 5px">发货日期</span>
            <el-date-picker type="date" placeholder="选择日期"></el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-select placeholder="选择线路" v-model="addformData.driverId">
              <el-option
                v-for="item in opt1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select
              placeholder="选择送货时间"
              v-model="addformData.driverId"
            >
              <el-option
                v-for="item in opt1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="2">
            <el-select placeholder="分拣状态" v-model="addformData.driverId">
              <el-option
                v-for="item in opt1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="2">
            <el-select placeholder="装车状态" v-model="addformData.driverId">
              <el-option
                v-for="item in opt1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="2">
            <el-select placeholder="订单标签" v-model="addformData.driverId">
              <el-option
                v-for="item in opt1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select placeholder="是否打印" v-model="addformData.driverId">
              <el-option
                v-for="item in opt1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6" style="margin-top: 5px">
            <el-input placeholder="输入客户名称搜索">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
        </el-row>
        <el-table :data="table2" style="width: 100%; margin-top: 10px">
          <el-table-column
            type="selection"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column prop="address" label="所属线路"></el-table-column>
          <el-table-column prop="address" label="客户名称"></el-table-column>
          <el-table-column prop="address" label="订单号"></el-table-column>
          <el-table-column prop="address" label="手机号"></el-table-column>
          <el-table-column prop="address" label="配送地址"></el-table-column>
          <el-table-column prop="address" label="订单标签"></el-table-column>
          <el-table-column prop="address" label="打印次数"></el-table-column>
          <el-table-column prop="address" label="总价"></el-table-column>
          <el-table-column prop="address" label="分拣状态"></el-table-column>
          <el-table-column prop="address" label="装车状态"></el-table-column>
          <el-table-column prop="address" label="装筐数"></el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total, prev, pager, next,sizes"
          :page-size="100"
          :page-sizes="[25, 50, 100, 200]"
          style="text-align: left"
          :total="0"
        />
      </el-tab-pane>
      <el-tab-pane label="线路客户列表" name="third">
        <el-row :gutter="5">
          <el-col :span="7">
            <span style="margin-right: 5px">发货日期</span>
            <el-date-picker type="date" placeholder="选择日期"></el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-select placeholder="选择线路" v-model="addformData.driverId">
              <el-option
                v-for="item in opt1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="2">
            <el-select placeholder="分拣状态" v-model="addformData.driverId">
              <el-option
                v-for="item in opt1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="2">
            <el-select placeholder="装车状态" v-model="addformData.driverId">
              <el-option
                v-for="item in opt1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select placeholder="是否打印" v-model="addformData.driverId">
              <el-option
                v-for="item in opt1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-input placeholder="输入客户名称搜索">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
        </el-row>
        <el-table :data="table3" style="width: 100%; margin-top: 10px">
          <el-table-column
            type="selection"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column prop="address" label="线路名称"></el-table-column>
          <el-table-column prop="address" label="客户名称"></el-table-column>
          <el-table-column prop="address" label="手机号"></el-table-column>
          <el-table-column prop="address" label="配送地址"></el-table-column>
          <el-table-column prop="address" label="打印次数"></el-table-column>
          <el-table-column prop="address" label="总价"></el-table-column>
          <el-table-column prop="address" label="分拣状态"></el-table-column>
          <el-table-column prop="address" label="装车状态"></el-table-column>
          <el-table-column prop="address" label="装筐数"></el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total, prev, pager, next,sizes"
          :page-size="100"
          :page-sizes="[25, 50, 100, 200]"
          style="text-align: left"
          :total="0"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { add, getList, del, edit } from '@/api/distribution/lineList'
import { GetDriver } from '@/api/distribution/driver'

export default {
  data() {
    return {
      addformData: {
        wsId: 1,
        routeName: '',
        driverId: 1,
        routeDefault: 1,
        remarks: '1',
      },
      editFormData: {
        // id:'',
        // wsId: 1,
        // routeName: '',
        // driverId:null,
        // routeDefault: 1,
        // remarks: '1',
      },
      //新增所需要传的‘配送司机对象’。
      deliveryRoute: {
        wsId: 1,
        routeName: '',
        driverId: null,
        routeDefault: 1,
        remarks: '1',
      },
      //分页组件属性定义：
      formData: [], //客户类型-分页查询。
      total: 0,
      currentPage1: 1, //当前页。
      count: 10, //当前页数据量。
      activeName: 'first',
      value: '',
      dialogVisible: false,
      editDialogVisible: false,
      opt1: '',
      lineDriverOptions: [], //线路司机options。
      table2: [],
      table3: [],
    }
  },
  async mounted() {
    await this.fetchData()
    await this.filter()
  },
  methods: {
    //获取分页数据。
    async fetchData() {
      const res = await getList(this.currentPage1, this.count)
      this.formData = res.data.list
      this.total = res.data.total
      console.log('pagging--->', res)
    },
    async saveInfo() {
      const res = await add(this.deliveryRoute)
      if (res.status == 200) {
        this.$message({
          type: 'success',
          message: '新增成功',
        })
        this.fetchData()
        this.dialogVisible = false
        this.$refs['addform'].resetFields() //清除input内容。
      }
    },
    async save() {
      await this.saveInfo()
    },
    //新增-线路司机-options。
    async filter() {
      const res = await GetDriver()
      this.lineDriverOptions = res.data
      console.log('getAllDriver--->', res)
    },
    //新增-取消。
    addCancel() {
      this.dialogVisible = false
      this.$refs['addform'].resetFields() //清除input内容。
    },
    //分页点击事件。
    handleSizeChange(val) {
      this.count = val
      this.fetchData()
    },
    //分页点击事件。
    handleCurrentChange(val) {
      this.currentPage1 = val
      this.fetchData()
    },
    //修改按钮。
    modify(index, item) {
      this.editDialogVisible = true
      this.editFormData = JSON.parse(JSON.stringify(item))
      console.log('item', item)
    },
    //修改-保存按钮。
    async editSave() {
      console.log(this.editFormData)
      const res = await edit(this.editFormData)
      console.log('editsave-->', res)
      if (res.status == 200) {
        this.$message({
          type: 'success',
          message: '编辑成功',
        })
      }
      this.editDialogVisible = false
      this.fetchData()
    },
    //删除。
    async delLine(data) {
      console.log('删除', data)
      const res = await del(data.id)
      this.$confirm('此操作将永久删除该职位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.fetchData()
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.contents {
  padding: 0 20px 10px;
}
</style>
